<script setup lang="ts" name="GoodsSku">
import { GoodsInfo, SpecsValues, Specs, Skus } from '@/types/data.d'
import bwPowerSet from '@/utils/power-set'
// 接收商品详情数据
const props = defineProps<{
  goodsInfo: GoodsInfo
}>()
const emits = defineEmits<{
  (e: 'getSku', obj: Skus): void
}>()
// 属性点击事件
const itemClick = (item2: SpecsValues, item: Specs) => {
  if (item2.disabled) {
    // 已禁用按钮不可点击
    return
  }
  if (item2.selected) {
    // 选中的取消当前选择
    item2.selected = false
  } else {
    // 没选中的,先当前属性的所有项的selected为false,再设置点击项的selected为true
    item.values.forEach(i => {
      i.selected = false
    })
    item2.selected = true
  }
  updateSelected()
  // 判断是否属性都选择完成，如果选择完成，要传值父组件相应sku的属性
  const selectList = getSelectedArr() // [蓝色，中国，10cm]
  if (!selectList.includes(undefined)) {
    // 如果选择完成，拿到对应项的sku
    const findItem = props.goodsInfo.skus.find(item => {
      const str = item.specs.map(i => i.valueName).join('&&&')
      const str2 = selectList.join('&&&')
      return str === str2
    })
    // 传递父组件属性
    if (findItem) {
      emits('getSku', findItem)
    }
    console.log('findItem', findItem)
  }

  // console.log(getSelectedArr())
}
/*
// 商品sku属性禁用处理
1：过滤没货商品
2：有货商品数据循环
   将有货商品的属性生成一个只有属性值的数组
   拿到所有组合的商品属性集（一维数组）
   将数组中的属性添加到对象中生成数据字典
3：通过数据字典判断属性是否有货，没货的禁用
*/
// 拿到数据字典
const pathArr: {
  [e: string]: boolean
} = {}
function getPathObj () {
  // 过滤没货商品
  const tempArr = props.goodsInfo.skus.filter(v => v.inventory > 0)
  // 有货商品数据循环
  tempArr.forEach(item => {
    // 将有货商品的属性生成一个只有属性值的数组
    const valueNameArr = item.specs.map(i => i.valueName)
    // 拿到所有组合的商品属性集（一维数组）
    // 将数组中的属性添加到对象中生成数据字典
    bwPowerSet(valueNameArr)
      .map(sub => sub.join('&&&'))
      .forEach(i => {
        pathArr[i] = true
      })
  })
}
// 更新属性的禁用状态
// function updateSkusState () {
//   props.goodsInfo.specs.forEach(item => {
//     item.values.forEach(sub => {
//       // sub.name到数据字典中查询是否有货
//       sub.disabled = !pathArr[sub.name]
//     })
//   })
// }
// 拿到已选择属性
const getSelectedArr = () => {
  const selectedArr: (string | undefined)[] = []
  props.goodsInfo.specs.forEach((item, index) => {
    const findItem = item.values.find(i => i.selected)
    selectedArr[index] = findItem?.name
  })
  return selectedArr
}

// 选择属性后更新属性禁用状态
const updateSelected = () => {
  // 循环所有的销毁属性
  props.goodsInfo.specs.forEach((item, index) => {
    // 拿到已选择属性的数组
    const selectArr = getSelectedArr() // [undefined,'中国',undefined]
    item.values.forEach(sub => {
      if (!sub.selected) {
        selectArr[index] = sub.name //  ['黑色','中国',undefined]
        const str = selectArr.filter(v => v).join('&&&') // ['黑色','中国']===>黑色&&&中国
        sub.disabled = !pathArr[str] // 数据字典查询是否有库存，没有就禁用，有就不禁用
      }
    })
  })
}
getPathObj()
updateSelected()
</script>
<template>
  <div class="goods-sku">
    <dl v-for="(item, index) in goodsInfo.specs" :key="index">
      <dt>{{ item.name }}</dt>
      <dd>
        <!-- 如果是图片就使用img渲染，否则使用span -->
        <template v-for="(item2, index2) in item.values" :key="index2">
          <img
            :class="{ selected: item2.selected, disabled: item2.disabled }"
            v-if="item2.picture"
            :src="item2.picture"
            alt=""
            @click="itemClick(item2, item)"
          />
          <span
            :class="{ selected: item2.selected, disabled: item2.disabled }"
            @click="itemClick(item2, item)"
            v-else
            >{{ item2.name }}</span
          >
        </template>

        <!-- <img
          class="selected"
          src="https://yanxuan-item.nosdn.127.net/d77c1f9347d06565a05e606bd4f949e0.png"
          alt=""
        />
        <img
          class="disabled"
          src="https://yanxuan-item.nosdn.127.net/d77c1f9347d06565a05e606bd4f949e0.png"
          alt=""
        /> -->
      </dd>
    </dl>
  </div>
</template>

<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
